<script setup>
import { ref } from "vue";
const emit = defineEmits(["destroy"]);
const props = defineProps({
  title: {
    type: String,
    default: "标题",
  },
  width: {
    type: String,
    default: "30%",
  },
  top: {
    type: String,
    default: "25vh",
  },
});
const dialogVisible = ref(false);
const open = () => {
  dialogVisible.value = true;
};
const close = () => {
  dialogVisible.value = false;
};
const destroyClose = () => {
  emit("destroy");
};
defineExpose({ open, close });
</script>
<template>
  <el-dialog
    class="modalStyle"
    v-model="dialogVisible"
    :title="title"
    :width="width"
    :top="top"
    :close-on-click-modal="false"
    destroy-on-close
    @close="destroyClose"
  >
    <slot name="content"></slot>
    <template #footer>
      <slot name="footer"> </slot>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped></style>
